<!--  -->
<template>
  <div class="goods-list">
    <!-- 头部导航 -->
    <van-nav-bar
      title="商品列表"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <van-icon name="arrow-left" color="#ffffff" size="24" />
      </template>
      <template #right>
        <van-icon name="scan" color="#ffffff" size="24" />
      </template>
    </van-nav-bar>
    <!-- 搜索框 -->
    <div class="search-box">
      <div class="search-main" @click="toSearch">搜索</div>
    </div>
    <!-- 筛选标签 -->
    <van-tabs v-model="active" animated line-width="125px">
      <van-tab title="综合">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <!-- <van-cell v-for="item in list" :key="item" :title="item" center /> -->
          <van-cell class="good-item" v-for="item in list" :key="item.goods_id" @click="toGoodDetail(item.goods_id)">
            <div class="left-cell">
              <img :src="item.goods_small_logo" alt="暂无图片信息" />
            </div>
            <div class="right-cell">
              <div class="name">
                {{ item.goods_name }}
              </div>
              <div class="price">${{ item.goods_price }}</div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="销量">
        <van-cell v-for="item in 20" :key="item"
          ><div style="text-align: center; color: red">
            暂无数据接口
          </div></van-cell
        >
      </van-tab>
      <van-tab title="价格">
        <van-cell v-for="item in 20" :key="item"
          ><div style="text-align: center; color: red">
            暂无数据接口
          </div></van-cell
        >
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { NavBar, Icon, List, Tab, Tabs, Cell } from "vant";
import { getGoodList } from "@/network/goods";
export default {
  data() {
    return {
      active: 0,
      list: [],
      loading: true,
      finished: false,
      currentPage: 1,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    //请求默认的商品列表数据
    this.getGoodListData(this.$route.query.type, this.currentPage);
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    //点击头部左侧
    onClickLeft() {
      this.$router.go(-1);
    },
    //点击头部右侧
    onClickRight() {
      console.log("点击了头部右侧");
    },
    //去搜索中心
    toSearch() {
      this.$router.push("Search");
    },
    //去商品详情页面
    toGoodDetail(id){
      this.$router.push({name:'Detail',params:{id}})
    },
    onLoad() {
      //异步更新数据
      this.currentPage++;
      this.getGoodListData(this.$route.query.type, this.currentPage);
    },
    //请求商品列表的数据
    async getGoodListData(query, page) {
      const res = await getGoodList(query, page);
      if (this.list.length < res.message.total) {
        this.list.push(...res.message.goods);
        this.loading = false;
      } else {
        this.finished = true;
      }
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Cell.name]: Cell,
  },
};
</script>
<style scoped>
.goods-list {
  padding-top: 46px;
}
/* 头部导航 */
.van-nav-bar {
  background-color: #ff6a00;
}
.goods-list >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
/* 头部搜索框 */
.search-box {
  height: 44px;
  background-color: #ff6a00;
  overflow: hidden;
}
.search-main {
  width: 355px;
  height: 34px;
  margin: 5px auto;
  font-size: 16px;
  text-align: center;
  line-height: 34px;
  border-radius: 20px;
  background-color: #fff;
}
/* 筛选 */
.goods-list >>> .van-tab__text {
  font-size: 18px;
}
.goods-list >>> .van-tab--active {
  color: #ee0a24;
}
.van-cell {
  font-size: 16px;
  padding: 10px;
  border-bottom: 1px solid #ff6a00;
}
.good-item .van-cell__value {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left-cell {
  width: 105px;
  margin-right: 10px;
}
.left-cell img {
  width: 100%;
}
.right-cell {
  width: 240px;
}
.right-cell .name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.right-cell .price {
  font-size: 18px;
  font-weight: bold;
  color: #ee0a24;
  margin-top: 10px;
}
</style>